/* font */
@font-face{
font-family: "walkway";
src: url('../fonts/Walkwayblack.ttf');
}
@font-face{
font-family: "Calibri";
src: url('../fonts/calibri.ttf');
}
@font-face{
font-family: "Century Gothic";
src: url('../fonts/GOTHIC.TTF');
}
/* Reset */
html, body, div, p, ul, li, img, span, a, h1, h2, h3, h4 { margin:0; padding:0; }
html { font-family:'Calibri','Century Gothic',Tahoma,Verdana,San-serif; font-size:13px; line-height:16px;}
a { color:black; text-decoration:none; }
a:hover { color:black; text-decoration:underline; }
a img { border:none; }
fieldset{border:none;}
p{font-size:12px;}


/*button*/
#connect-user{
background-color:#1a1a1a !important;
color:#58a6bd !important;
}
#create-user{
background-color:#1a1a1a !important;
color:#aa3917 !important;
}

/* Common */
body { background-color: #000000; background-image:url('../img/bg_profil.jpg'); background-repeat:repeat-x;}
#container { width:998px; margin:0 auto; }

#topbanner{
height:117px;
}

#logo{
float:left;
}

#slogan{
color:#838383 !important;
position:absolute;
margin-left:110px;
margin-top :-20px;
font-style:italic;
}

#connexion-form{
height: 220px !important;
}

#inscription-form{
height: 520px !important;
}

.facultatif{
font-size:10px;
font-style:italic;
color:#cccccc;
}

a.link{
font-size:12px;
font-weight:normal;
color: #4688A0 !important;
}
a.link:hover{
text-decoration: none;
color: #666666 !important;
}

/*button*/
#headerButtons{
	width:300px;
	float:right;
	text-align:right;
	height:100px;
	margin-top : 20px!important;
	margin-right : 30px;
}

#headerButtons .inscription_button{
	background-image:url(../img/bgBt.png);
	background-color:black;
	margin-top:20px !important;
	border:0;
	text-decoration:none;
	margin-top:20px !important;
	cursor:pointer;
	float:right;
	margin-left : 10px;
	width:110px; height : 29px;
	color : #d24220;font-size:16px;
}
#headerButtons .inscription_button:hover{
	color : #ffffff; 
}
.button-addphoto{
	background-color:#1a1a1a;
border-radius: 5px 5px 5px 5px!important;
-moz-border-radius: 5px 5px 5px 5px!important;
	border:0;
	text-decoration:none;
	margin-top:20px !important;
	cursor:pointer;
	float:right;
	margin-left : 10px;
	padding-bottom:5px;
	margin-bottom:160px;
	width:160px; 
	height : 30px;
	color : #58a6bd;font-size:16px;
}

.button-addphoto:hover{
	color : #ffffff !important; 
	padding-bottom:5px;
}

.buttonrecherche{
-webkit-appearance: none;
	background-color:#1a1a1a;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
	border:0;
	text-decoration:none;
	cursor:pointer;
	float:right;
	margin-left : 10px;
	padding-bottom:5px;
	width:160px; 
	height : 30px;
	color : #58a6bd;font-size:16px;
}
.buttonrecherche:hover{
	color : #ffffff !important; 
	padding-bottom:5px;
}

#recherche_link{
position: absolute;
margin-top:-10px;
}
.button-connexion{
	background-image:url(../img/bgBt.png);
	background-color:black;
	border:0;
	text-decoration:none;
	margin-top:20px !important;
	cursor:pointer;
	float:right;
	margin-left : 10px;
	padding-bottom:5px;
	width:110px; height : 29px;
	color : #58a6bd;font-size:16px;
}
#headerButtons .button-connexion:hover{
	color : #ffffff !important; 
	padding-bottom:5px;
}
.button-connexion:hover{
	color : #ffffff !important; 
	padding-bottom:5px;
}

#headerButtons .inscription_button:hover{
	color : #ffffff; 
}


#create-user{
background-color:#171717 !important;
color:#ffffff !important;
margin-top:10px !important;
float:right;
}
#connexion{
font-size:0px !important;
color:#1A1A1A !important;
float:right!important;
margin-right:20px !important;
width:110px !important;
height:30px !important;
}

#connexion a{
background-image: url('../img/connexion.png')!important;
background-repeat:no-repeat!important;
width:110px!important;
height:30px!important;
display:block!important;
}

#connexion a:hover{
background-image: url('../img/connexion_hover.png')!important;
background-repeat:no-repeat!important;
width:110px!important;
height:30px!important;
}

#deconnexion{
background-color: #1a1a1a!important;
color: #41839B!important;
font-family: 'Century Gothic'!important;
font-size:16px;
border-radius: 5px 5px 5px 5px!important;
-moz-border-radius: 5px 5px 5px 5px!important;
height:30px!important;
width:120px!important;
border-color:#1a1a1a!important;
border-color:transparent!important;
float:right!important;
margin-right:10px;
}
#deconnexion:hover{
background-color: #1a1a1a!important;
color: #ffffff!important;
font-family: 'Century Gothic'!important;
font-size:16px;
border-radius: 5px 5px 5px 5px!important;
-moz-border-radius: 5px 5px 5px 5px!important;
height:30px!important;
width:120px!important;
border-color:transparent!important;
margin-right:10px;
}

.open-profil{
background-color: #1a1a1a!important;
color: #C94423!important;
font-family: 'Century Gothic'!important;
font-size:16px;
border-radius: 5px 5px 5px 5px!important;
-moz-border-radius: 5px 5px 5px 5px!important;
height:30px!important;
width:100px!important;
border-color:#1a1a1a!important;
border-color:transparent!important;
float:right!important;
margin-right:10px;
}
.open-profil:hover{
background-color: #1a1a1a!important;
color: #ffffff!important;
font-family:  'Century Gothic'!important;
font-size:16px;
border-radius: 5px 5px 5px 5px!important;
-moz-border-radius: 5px 5px 5px 5px!important;
height:30px!important;
width:100px!important;
border-color:transparent!important;
margin-right:10px;
}

.registration_button{
background-color: #1a1a1a;
color: #ffffff;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-color:transparent;
margin:10px;
margin-left:300px;
margin-right:0px;
}
.registration_button:hover{
background-color: #1a1a1a;
color: #000000;
font-family:  'Century Gothic';
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-color:transparent;
margin:10px;
margin-left:300px;
margin-right:0px;
}
.inscription_button{
background-color: #1a1a1a;
color: #C94423;
font-family:  'Century Gothic';
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
height:30px;
width:110px;
border-color:#1a1a1a;
border-color:transparent;
float:right;
}
.inscription_button:hover{
background-color: #1a1a1a;
color: #ffffff;
font-family:  'Century Gothic';
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
height:30px;
width:110px;
border-color:transparent;
}
#inscription{
font-size:0px !important;
color:#1A1A1A !important;
float:right!important;
margin-right:10px;
width:110px;
height:30px;
}

#inscription a{
display:block;
background-image: url('../img/inscription.png');
background-repeat:no-repeat;
width:110px;
height:30px;
}

#inscription a:hover{
background-image: url('../img/inscription_hover.png')!important;
background-repeat:no-repeat;
width:110px;
height:30px;
}

#inscrivezvous{
font-size:0px !important;
color:#1A1A1A !important;
float:right;
padding-top:8px;
padding-right:30px;
width:202px;
height:46px;
}

#inscrivezvous a{
display:block;
background-image: url('../img/inscrivezvous.png');
background-repeat:no-repeat;
width:202px;
height:46px;
}

#inscrivezvous a:hover{
background-image: url('../img/inscrivezvous_hover.png');
background-repeat:no-repeat;
width:202px;
height:46px;
}

.clear{
clear:both;
}

#carte_profil{
height:316px;
background-image: url('../img/banniere_profil.png');
}
#profil{
background-image: url('../img/fiche.jpg');
background-repeat: repeat;
height:272px;
width:449px;
display:block;
float:left;
margin-top:12px;
padding:15px;
border-radius: 15px 15px 0 0px;
-moz-border-radius: 15px 15px 0 0px;
}

.profil_photo{
height:150px;
width:150px;
border: 2px solid #717171;
border-radius: 4px;
-moz-border-radius: 4px;
float:left;
margin: 0 10px 10px 0;
}
.profil_fiche{
float:left;
width:285px;
margin: 0 0 10px 0px;
}
#profil_description{
}
.profil_statut{
font-weight:bold;
}
.profil_nom{
font-weight:bold;
font-family:'Century Gothic';
font-size:30px;
color:#357a8e;
margin: 15px 0 15px 0;
}
.contact_btn a{
float:left;
display:block;
background-image: url('../img/contact.png');
background-repeat:no-repeat;
height:21px;
width:74px;
font-size:0px !important;
color:#1A1A1A !important;
margin-right:3px;
}

.contact_btn a:hover{
background-image: url('../img/contact_hover.png');
background-repeat:no-repeat;
height:21px;
width:74px;
font-size:0px !important;
color:#1A1A1A !important;
}
.siteweb_btn a{
float:left;
display:block;
background-image: url('../img/siteweb.png');
background-repeat:no-repeat;
height:21px;
width:74px;
font-size:0px !important;
color:#1A1A1A !important;
margin-right:3px;
}

.siteweb_btn a:hover{
background-image: url('../img/siteweb_hover.png');
background-repeat:no-repeat;
height:21px;
width:74px;
font-size:0px !important;
color:#1A1A1A !important;
}
.suivre_btn a{
float:left;
display:block;
background-image: url('../img/suivre.png');
background-repeat:no-repeat;
height:21px;
width:68px;
font-size:0px !important;
color:#1A1A1A !important;
}

.suivre_btn a:hover{
background-image: url('../img/suivre_hover.png');
background-repeat:no-repeat;
height:21px;
width:68px;
font-size:0px !important;
color:#1A1A1A !important;
}

.suivi_btn a{
float:left;
display:block;
background-image: url('../img/suivi.png');
background-repeat:no-repeat;
height:21px;
width:68px;
font-size:0px !important;
color:#1A1A1A !important;
}

.suivi_btn a:hover{
background-image: url('../img/suivi_hover.png');
background-repeat:no-repeat;
height:21px;
width:68px;
font-size:0px !important;
color:#1A1A1A !important;
}

.editProfil_btn a{
float:left;
display:block;
background-image: url('../img/editProfil.png');
background-repeat:no-repeat;
height:21px;
width:28px;
font-size:0px !important;
color:#1A1A1A !important;
float : left;
}

.editProfil_btn a:hover{
background-image: url('../img/editProfil_hover.png');
background-repeat:no-repeat;
height:21px;
width:56px;
font-size:0px !important;
color:#1A1A1A !important;
float : left;
}
.newAlbum_btn a{
float:left;
display:block;
background-image: url('../img/newAlbum.png');
background-repeat:no-repeat;
height:21px;
width:92px;
font-size:0px !important;
color:#1A1A1A !important;
float : left;
}

.newAlbum_btn a:hover{
background-image: url('../img/newAlbum_hover.png');
background-repeat:no-repeat;
height:21px;
width:92px;
font-size:0px !important;
color:#1A1A1A !important;
float : left;
}
.addPhotos_btn a{
float:left;
display:block;
background-image: url('../img/addPhotos.png');
background-repeat:no-repeat;
height:21px;
width:92px;
font-size:0px !important;
color:#1A1A1A !important;
float : left;
margin-left:10px;
}

.addPhotos_btn a:hover{
background-image: url('../img/addPhoto_hover.png');
background-repeat:no-repeat;
height:21px;
width:92px;
font-size:0px !important;
color:#1A1A1A !important;
float : left;
}

#localisation{
background-repeat: no-repeat;
width:50%;
height:272px; 
display:block;
float:left;
}

#onglets{
width:100% !important;
margin:0 auto; 
margin-top:-41px;
}

#description{
height:192px;
padding: 10px;
}

#description .texte{
float:left;
width:700px; 
margin-bottom:10px;
padding:10px;
}

#schema{
width: 100%;
text-align:center;
}

#schema img{
margin-left: auto;
margin-right: auto;
margin-top:-15px;
}

.art{
font-size:18px;
font-family:  'Century Gothic';
font-weight:normal !important;
font-style:normal !important;
color: #ffffff;
}

span{
font-weight:bold;
font-style:italic;
color: #ffffff;
}

textarea{
height : 50px;
}

form span {
font-weight:normal;
font-style:italic;
color: #000000;
}

.list-photo{
color: #ffffff;
}

#footer{
background-color: #000000;
width: 996px;
text-align: center;
margin:0 auto;
margin-bottom:0;
}

#footer a{
list-style-type: none;
text-decoration:none;
color:#ffffff;
font-size:11px;
font-family:'Century Gothic';
}
#footer a:hover{
list-style-type: none;
text-decoration:none;
color:#C94423;
font-size:11px;
}

#footer-links{
text-align:center;
}
/* use a semi-transparent image for the overlay */
	#overlay {
		color:#000000;
		height:auto;
	}
	
	/* container for external content. uses vertical scrollbar, if needed */
	div.contentWrap {
		overflow-y:auto;
		height: 600px;
	}
.external_page{
	height:auto;
	width:400px;
	background-color:#212020;
	color:#ffffff;
	padding: 20px;
	margin:0 auto;
	margin-top:200px;
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
}

/* --------------------------- PHOTO GRID STUFF ------------------------- */
#gridContainer { margin-left:20px; }
#gridColumn{  width : 190px ; float : left;}
.gridElement{ position:relative; margin:10px; margin-bottom:20px;cursor:pointer; }
.gridPhoto{ position:absolute;z-index:1; }
.gridPhoto img {position:absolute; border:1px solid #737373;}
.gridInfo { position:absolute;opacity:0;z-index:2; }
.gridInfo .whiteBorder { position:absolute;z-index:1; border:2px solid white; width:169px; }
.gridInfo .infoBox { position:absolute;  width : 165px; height : 32px; padding-left:7px; padding-top:5px; z-index:2; background-image : url(../images/bg_photoInfo.png);}
.gridInfo .infoTextStyle { color:#000000; font-size:12px; font-family:Century Gothic;line-height:13px; }
#gridTools{ text-align : right; }

/*-------------------------- MAP STUFF ---------------------------------- */
#map {height:397px; width:1000px; background-color:blue;}
#flashcontent{background-color:red; width:1000px; height:397px;}

.tab-inscription{
border: 1px solid #0D0D0D;
padding:10px;
}

.titre-inscription{
left: 0;
font-weight:bold;
margin-bottom:10px;
}